<template>
<div class="wrap_home">
   <div class="home_index">
    <calendar theme='#fea724'></calendar>
    <outin :ins="ins" :outs="outs"></outin>
</div>
<div class="noop"></div>
<chart></chart> 
<div class="noop"></div>
<importaccount @msgImport="msgImport" @voiceImport="voiceImport"></importaccount>
</div>

    
</template>

<script>
import calendar from "auto-calendar";
import outin from "./outin.vue";
import chart from "./chart.vue";
import importaccount from "./importaccount.vue";
import { openCenter } from "@/common/toast.js";
export default {
  components: {
    calendar,
    outin,
    chart,
    importaccount
  },
  data() {
    return {
      outs: 3000,
      ins: 2000
    };
  },
  methods: {
    voiceImport() {
      openCenter(this, "暂时未实现");
      console.log("语音导入");
    },
    msgImport() {
      openCenter(this, "暂时未实现");
      console.log("信息导入");
    }
  }
};
</script>
<style lang="scss">
@import "../style/vars.scss";
.noop {
    height: 14px;
    background: #eee;
}
.home_index {
  background: $background-color2;
}
.calendar {
  padding: 36px 20px;
  background: $background-color2;
  .pannel-wrapper {
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgb(254, 167, 36);
  }
  .year {
    display: inline-block;
    margin: 3px 0.13333rem;
    cursor: pointer;
  }
  .pannel-header {
    border-radius: 0;
    -webkit-border-radius: 0;
  }
  .input-wrapper {
    z-index: 1000;
    .input {
      width: 100px;
      text-align: center;
      line-height: 20px;
      background-color: $background-color10;
      color: #fff;
      font-weight: bold;
      border: none;
      border-radius: 10px;
    }
    .input-clear {
      display: none;
    }
  }
}
</style>
